﻿var yScalar;
var xScalar;
var minVal;
var botton;
var start;
function init_Plot(can,dataList,headerList,params) {
    // set these values for your data
    var numSamples = 12;
    var maxVal = params.max;
    minVal = params.min;
    var scale = 0;
    var stepSize = params.step;
    var colHead = 50;
    var rowHead = params.length;
    var margin = 5;
    var header = [" "];
    for (var i in headerList)
        header.push(headerList[i].data);
    var bottom = can.height;
    var ctx = can.getContext("2d");
    ctx.fillStyle = "black";
    ctx.font = "14pt Segoe UI";
    // set vertical scalar to available height / data points
    yScalar = (can.height - colHead - margin) / (maxVal - minVal);
    // set horizontal scalar to available width / number of samples
    xScalar = (can.width - rowHead) / numSamples;

    ctx.strokeStyle = "rgba(128, 128, 255, 0.5)"; // light blue lines
    ctx.beginPath();
    // print  column header and draw vertical grid lines
    start = xScalar + (rowHead - xScalar);
    for (i = 1; i <= numSamples; i++) {
        var x = i * xScalar + (rowHead - xScalar);
        ctx.fillText(header[i], x, colHead - margin);
        ctx.moveTo(x, colHead);
        ctx.lineTo(x, can.height - margin);
    }
    // print row header and draw horizontal grid lines
    var count = 0;
    for (scale = maxVal; scale >= minVal; scale -= stepSize) {
        var y = colHead + (yScalar * count * stepSize);
        ctx.fillText(scale, margin, y + margin);
        ctx.moveTo(rowHead, y);
        ctx.lineTo(can.width, y);
        count++;
    }
    ctx.stroke();

    // set a color and make one call to plotData()
    // for each data set
    for (var i in dataList) {
        ctx.strokeStyle = dataList[i].data.color;
        var dataSet =dataList[i].data.values;
        ctx.moveTo(start, dataSet[0]);
        ctx.beginPath();
        for (i = 0; i <= numSamples; i++) {
            ctx.lineTo((i + 1) * xScalar + (start - xScalar), calcY(bottom,dataSet[i]));
        }
        ctx.stroke();
    }
   
}
function init_Bar(can, dataSource,title,parms) {
    // set these values for your data
    var numSamples = parms.count;
    var maxVal = parms.max;
    var scale = 0;
    var stepSize = parms.step;
    var colHead = 50;
    var rowHead = 60;
    var margin = 10;
    var header = title ? title : '';
    var ctx = can.getContext("2d");
    ctx.fillStyle = "black";
    yScalar = (can.height - colHead - margin) / (maxVal);
    xScalar = (can.width - rowHead) / (numSamples + 1);
    ctx.strokeStyle = "rgba(128,128,255, 0.5)"; // light blue line
    ctx.beginPath();
    // print  column header
    ctx.font = "14pt Segoe UI";
    ctx.fillText(header, 0, colHead - margin);
    // print row header and draw horizontal grid lines
    ctx.font = "12pt Segoe UI";
    var count = 0;
    var y;
    for (scale = maxVal; scale >= 0; scale -= stepSize) {
        y = colHead + (yScalar * count * stepSize);
        ctx.fillText(scale, margin, y + margin);
        ctx.moveTo(rowHead, y);
        ctx.lineTo(can.width, y);
        count++;
    }
    ctx.stroke();
    y = colHead + (yScalar * count * stepSize);
    for (i = 0; i < numSamples; i++) {
        ctx.font = "14pt Segoe UI";
        ctx.textBaseline = "bottom";
        ctx.fillText(dataSource[i].data.title, xScalar * (i + 1), y );
    }

    // translate to bottom of graph and scale x,y to match data
    ctx.translate(0, can.height - margin);
    ctx.scale(xScalar, -1 * yScalar);
    // draw bars
    for (i = 0; i < numSamples; i++) {
        ctx.fillStyle =  dataSource[i].data.color ?dataSource[i].data.color : 'blue';
        ctx.fillRect(i + 1, scale + stepSize, 0.5, dataSource[i].data.value - (scale + stepSize));
    }
}


function init_Pie(can, dataSource, title, parms) {
    var radius = can.height / 3;
    var midX = can.width / 2;
    var midY = can.height / 2;
    var numSamples = parms.count;
    var ctx = can.getContext("2d");
    ctx.strokeStyle = "black";
    ctx.font = "18pt Segoe UI";
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";
    // get data set
       var total = 0;
    for (var i = 0; i < numSamples; i++) {
        total += dataSource[i].data.value;
    }
    // get ready to draw
    ctx.clearRect(0, 0, can.width, can.height);
    var oldAngle = 0;

    // for each sample
    for (var i = 0; i < numSamples; i++) {
        // draw wedge
        var portion = dataSource[i].data.value / total;
        var wedge = 2 * Math.PI * portion;
        ctx.beginPath();
        var angle = oldAngle + wedge;
        ctx.arc(midX, midY, radius, oldAngle, angle);
        ctx.lineTo(midX, midY);
        ctx.closePath();
        ctx.fillStyle = dataSource[i].data.color;
        ctx.fill();    // fill with wedge color
        ctx.stroke();  // outline in black

        // print label
        // set angle to middle of wedge
        var labAngle = oldAngle + wedge / 2;
        // set x, y for label outside center of wedge
        // adjust for fact text is wider than it is tall
        var labX = midX + Math.cos(labAngle) * radius * 1.5;
        var labY = midY + Math.sin(labAngle) * radius * 1.3 - 12;
        // print name and value with black shadow
        ctx.save();
        ctx.shadowColor = "black";
        ctx.shadowOffsetX = 1;
        ctx.shadowOffsetY = -1;
        ctx.fillStyle = dataSource[i].data.color;
        ctx.fillText(dataSource[i].data.title, labX, labY);
        ctx.fillText("$" + dataSource[i].data.value, labX, labY + 25);
        ctx.restore();
        // update beginning angle for next wedge
        oldAngle += wedge;
    }
}

function calcY(bottom,value) {
    var y = bottom - value * yScalar + yScalar * minVal;
    return y;
}

WinJS.Namespace.define("WinJSToolkit.Controls",
{
    PlotChart: function(element, options) {
        var canvas = document.createElement('canvas');
        canvas.height = parseInt(element.style.height.replace('px', ''));
        canvas.width = parseInt(element.style.width.replace('px', ''));
        element.className = "control container";

        var indexContainer = document.createElement("div");
        indexContainer.className = 'key container';
        for (var index in options.itemDataSource._list._keyMap) {
            var item = options.itemDataSource._list._keyMap[index];
            var nelement = document.createElement("div");

            var thumb = document.createElement("div");
            thumb.className = " key thumb";
            thumb.style.backgroundColor = item.data.color;
            nelement.appendChild(thumb);

            nelement.style.color = item.data.color;
            nelement.innerHTML += item.data.title;
            indexContainer.appendChild(nelement);
        }

        element.appendChild(canvas);
        element.appendChild(indexContainer);
        var params = JSON.parse((chartsRT.PlotChart.PlotChartUT.getParams(JSON.stringify(options.itemDataSource._list._keyMap))));
        init_Plot(canvas, options.itemDataSource._list._keyMap, options.itemDataHeader._list._keyMap, params);
    },
    BarChart: function(element, options) {
        var canvas = document.createElement('canvas');

        canvas.height = parseInt(element.style.height.replace('px', ''));
        canvas.width = parseInt(element.style.width.replace('px', ''));
        element.className = "control container";
        element.appendChild(canvas);
        var params = JSON.parse((chartsRT.BarChart.BarChartUT.getParams(JSON.stringify(options.itemDataSource._list._keyMap))));
        init_Bar(canvas, options.itemDataSource._list._keyMap, options.title, params);
    },
    PieChart: function(element, options) {
        var canvas = document.createElement('canvas');
        canvas.height = parseInt(element.style.height.replace('px', ''));
        canvas.width = parseInt(element.style.width.replace('px', ''));
        element.className = "control container";
        element.appendChild(canvas);
        var params = JSON.parse((chartsRT.BarChart.BarChartUT.getParams(JSON.stringify(options.itemDataSource._list._keyMap))));
        init_Pie(canvas, options.itemDataSource._list._keyMap, options.title, params);
    },
    GaugeChart: WinJS.Class.define(
        function(element, options) {
            var canvas = document.createElement('canvas');
            canvas.height = parseInt(element.style.height.replace('px', ''));
            canvas.width = parseInt(element.style.width.replace('px', ''));
            element.appendChild(canvas);
            this.gauge = new AquaGauge(canvas, {
                min: element.getAttribute('data-minimum'),
                max: element.getAttribute('data-maximum'),
                title: element.getAttribute('data-title'),
                subtitle: element.getAttribute('data-subtitle'),
                Background: element.style.backgroundColor
            });
            this.gauge.refresh(element.getAttribute('data-value'));
        })
});

WinJS.Utilities.markSupportedForProcessing(WinJSToolkit.Controls.PlotChart);
WinJS.Utilities.markSupportedForProcessing(WinJSToolkit.Controls.BarChart);
WinJS.Utilities.markSupportedForProcessing(WinJSToolkit.Controls.PieChart);
WinJS.Utilities.markSupportedForProcessing(WinJSToolkit.Controls.GaugeChart);